<template>
  <transition name="dialog-fade">
    <div :class="['dialog' ,'animated']" v-show="visible" :style="{'z-index':zindex}" >
      <div class="dialog_content ">
        <slot name="content"></slot>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "Dialog",
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    zindex:{
      type:Number,
      default:100
    },
  },
  data () {
    return {
      
    };
  },
  computed:{
    
  },
  mounted(){
 
  },
  methods:{
 
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.dialog-fade-enter-active {
    -webkit-animation: dialog-fade-in .3s;
    animation: dialog-fade-in .3s
}

.dialog-fade-leave-active {
    -webkit-animation: dialog-fade-out .3s;
    animation: dialog-fade-out .3s
}

@-webkit-keyframes dialog-fade-in {
    0% {
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes dialog-fade-in {
    0% {
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@-webkit-keyframes dialog-fade-out {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
    100% {
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
}

@keyframes dialog-fade-out {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
    100% {
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
}
.dialog{
  position: fixed;
  // top:0;
  // left: 0;
  // bottom:0;
  // right: 0;
   @include media-screen();
   height: 100%;
   top:0;
  background: rgba(2,2,2,.8);
  .dialog_content{
    margin: 0 auto;
    height: 100%;
    overflow-y: scroll;
    //padding: px2rem(20);
  }
}
</style>